<!-- eslint-disable vue/valid-v-slot -->
<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="seachForm" :model="form">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="name" hide-label>
                    <a-input
                      v-model="form.name"
                      class="width100"
                      placeholder="请输入系列名称"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operator" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.operator"
                      placeholder="请选择运营商"
                      allow-clear
                    >
                      <a-option :value="0">中国移动</a-option>
                      <a-option :value="1">中国联通</a-option>
                      <a-option :value="2">中国电信</a-option>
                      <a-option :value="3">中国广电</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="channelId" hide-label>
                    <a-select
                      class="width100"
                      allow-search
                      v-model="form.channelId"
                      placeholder="请选择渠道"
                      allow-clear
                    >
                      <a-option v-for="item in channelNo" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="preStorage" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.preStorage"
                      placeholder="请选择强制预存"
                      allow-clear
                    >
                      <a-option :value="1">开启</a-option>
                      <a-option :value="0">关闭</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="pollingCondition" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.pollingCondition"
                      placeholder="请选择轮询条件"
                      allow-clear
                    >
                      <a-option :value="-1">不轮询</a-option>
                      <a-option :value="0">所有卡</a-option>
                      <a-option :value="1">已充值卡</a-option>
                      <a-option :value="2">已充值卡+已实名卡</a-option>
                      <a-option :value="3">已充值卡+已实名卡+已激活卡</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="operationMode" hide-label>
                    <a-select
                      class="width100"
                      v-model="form.operationMode"
                      placeholder="请选择运营模式"
                      allow-clear
                    >
                      <a-option :value="1">共享池模式</a-option>
                      <a-option :value="0">套餐包模式</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.addTime"
                      show-time
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择开始创建时间"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      format="YYYY-MM-DD HH:mm:ss"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      class="width100"
                      v-model="form.endTime"
                      show-time
                      :disabledDate="changeTraceStart"
                      placeholder="请选择结束创建时间"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        v-permission="seriesList"
                        html-type="submit"
                        @click="doRefresh(1)"
                        ><template #icon> <icon-search /> </template>搜索</a-button
                      >
                      <a-button v-permission="seriesList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button
            type="primary"
            v-permission="addSeries"
            @contextmenu.prevent.stop="onAddItems"
            @click="onAddItems"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>新建</template>
          </a-button>
          <a-button
            type="outline"
            v-permission="exportSeriesList"
            @click="exportChannelLists"
            :loading="loading"
          >
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>导出</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :loading="tables.tableLoading"
          :data="table.dataList"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          :columns="tableColumns.list"
          table-layout-fixed
          hide-expand-button-on-empty
          :default-expand-all-rows="true"
          :scroll="{ x: 1000 }"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              :align="item.align"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'channelName'" #cell="{ record }">
                {{ record.channel.name }}
              </template>
              <template v-if="item.key === 'name'" #cell="{ record }">
                <div class="titleName"
                  ><img class="img" v-if="record.operator == 0" src="@/assets/yd.png" alt="" />
                  <img class="img" v-if="record.operator == 1" src="@/assets/lt.png" alt="" />
                  <img class="img" v-if="record.operator == 2" src="@/assets/dx.png" alt="" />
                  <img class="img" v-if="record.operator == 3" src="@/assets/gd.png" alt="" />
                  <div
                    v-if="record.name.length < 16"
                    style="
                      width: 180px;
                      white-space: nowrap;
                      overflow: hidden;
                      text-overflow: ellipsis;
                    "
                    >{{ record.name }}</div
                  >
                  <a-tooltip v-else :content="record.name">
                    <div
                      style="
                        width: 180px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                      "
                      >{{ record.name }}</div
                    >
                  </a-tooltip>
                </div>
              </template>
              <template v-if="item.key === 'pollingCondition'" #cell="{ record }">
                <a-tag
                  v-if="
                    record.pollingCondition == 1 ||
                    record.pollingCondition == 2 ||
                    record.pollingCondition == 3
                  "
                  color="blue"
                  >开启</a-tag
                >
                <a-tag v-else color="red">关闭</a-tag>
              </template>
              <template v-if="item.key === 'orderSubmit'" #cell="{ record }">
                <a-space>
                  <div v-if="record.orderSubmit == undefined">- - -</div>
                  <div v-else>
                    <a-switch
                      v-model="record.orderSubmit"
                      :checked-value="true"
                      :unchecked-value="false"
                      @change="changeState(record)"
                    >
                      <template #checked-icon>
                        <icon-check />
                      </template>
                      <template #unchecked-icon>
                        <icon-close />
                      </template>
                    </a-switch>
                  </div>
                </a-space>
              </template>
              <template v-if="item.key === 'preStorage'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.preStorage == true" color="blue">开启</a-tag>
                  <a-tag v-else color="red">关闭</a-tag>
                </a-space>
              </template>
              <template v-if="item.key === 'realNameSystem'" #cell="{ record }">
                <a-space>
                  <a-tag v-if="record.realNameSystem == 0" color="arcoblue">短信验证</a-tag>
                  <a-tag v-else-if="record.realNameSystem == 1" color="red">国政通验证</a-tag>
                  <div v-else>---</div>
                </a-space>
              </template>
              <template v-if="item.key === 'remarks'" #cell="{ record }">
                <a-space>
                  <div v-if="record.remarks">{{ record.remarks }}</div>
                  <div v-else>---</div>
                </a-space>
              </template>
              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space style="display: flex; flex-wrap: wrap">
                  <a-button
                    size="small"
                    type="text"
                    class="butten"
                    v-permission="updateSeries"
                    @click="infoDepartmentss(record)"
                    @contextmenu.prevent.stop="infoDepartmentss(record)"
                  >
                    编辑
                  </a-button>
                  <a-button
                    size="small"
                    v-permission="addSeries"
                    class="butten"
                    type="text"
                    @click="copy(record)"
                  >
                    复制
                  </a-button>
                  <!-- <a-button size="small" class="butten" type="text" @click="iconFn">
                    图标
                  </a-button> -->
                  <a-button
                    size="small"
                    v-permission="deleteSeries"
                    class="butten"
                    type="text"
                    @click="onDeleteItem(record)"
                  >
                    删除
                  </a-button>
                  <a-button
                    v-permission="couponplan"
                    size="small"
                    class="butten"
                    type="text"
                    @click="couponOpen(record)"
                  >
                    券包
                  </a-button>
                  <a-button
                    v-permission="getMealClassList"
                    size="small"
                    class="butten"
                    type="text"
                    @click="openTypeFn(record)"
                  >
                    分类
                  </a-button>
                  <a-button
                    v-permission="getMealClassList"
                    size="small"
                    class="butten"
                    type="text"
                    @click="openGive(record)"
                  >
                    优惠
                  </a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template>
    </TableBody>
    <!-- 套餐分类 -->
    <a-modal
      v-model:visible="typeShow"
      title="套餐分类"
      width="600px"
      @before-close="couponClose"
      :mask-closable="false"
      title-align="start"
    >
      <a-button
        type="primary"
        size="small"
        v-permission="addMealClass"
        @click="showAddClass"
        style="margin-bottom: 15px"
      >
        新建
      </a-button>
      <a-alert
        style="background-color: rgb(var(--arcoblue-1)); margin-bottom: 15px"
        :show-icon="false"
        >未分类套餐将显示到第一个分类</a-alert
      >
      <a-table
        :columns="couponColumns1"
        style="width: 100%"
        :data="classData.classList"
        :pagination="false"
        @change="handleChangeClass"
        :draggable="subForm.form.seriesId && sortShow == true ? { type: 'row', width: 40 } : {}"
      >
        <template #columns>
          <a-table-column
            v-for="item of couponColumns1"
            :key="item.key"
            align="left"
            :title="(item.title as string)"
            :width="item.width"
            :data-index="(item.key as string)"
            :fixed="item.fixed"
            :ellipsis="true"
            :tooltip="true"
          >
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space :size="2">
                <a-button
                  v-permission="updateMealClass"
                  @click="updateClass(record)"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  >编辑</a-button
                >
                <a-button
                  v-permission="fenpeiMeal"
                  @click="classAddMeal(record)"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  >分配</a-button
                >
                <a-button
                  v-permission="delMealClass"
                  @click="deleteClass(record)"
                  style="padding: 0px 4px"
                  type="text"
                  size="small"
                  >删除</a-button
                >
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>

      <template #footer>
        <a-space>
          <!-- <a-button @click="couponClose">取消</a-button>
          <a-button type="primary" @click="couponOk">确定</a-button> -->
        </a-space>
      </template>
    </a-modal>
    <!-- 新建分类 -->
    <a-modal
      v-model:visible="modal.classVisible"
      @before-close="handleCancel"
      :title="classTitle"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="classRef" :auto-label-width="true" :model="subForm.form">
        <a-form-item
          label="分类名称"
          field="name"
          :rules="[{ required: true, message: '分类名称不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model.trim="subForm.form.name" placeholder="请输入分类名称" allow-clear />
        </a-form-item>
        <a-form-item label="分类描述" field="tag">
          <a-input v-model.trim="subForm.form.tag" placeholder="请输入分类描述" allow-clear />
        </a-form-item>
        <a-form-item
          label="分类排序"
          field="sort"
          :rules="[{ required: true, message: '分类排序不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input v-model.trim="subForm.form.sort" placeholder="请输入分类排序" allow-clear />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 分配套餐 -->
    <a-modal
      v-model:visible="modal.addMealVisible"
      @before-close="handleCancelAddMeal"
      :title="'分配套餐'"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userForm" :auto-label-width="true" :model="subForm.form">
        <a-form-item field="single" label="分配套餐">
          <div class="box-bcg">
            <a-checkbox-group direction="vertical" v-model="subForm.addMealForm.checkData">
              <a-checkbox
                style="line-height: 28px"
                v-for="(item, index) in classData.chooseDataList"
                :value="item.id"
                >{{ item.name }}</a-checkbox
              >
            </a-checkbox-group>
          </div>
        </a-form-item>
      </a-form>
      <template #footer>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <a-space>
            <a-button type="text" style="padding: 0px 4px; background: none" @click="chooseAllIds"
              >全选</a-button
            >
            <a-button
              type="text"
              style="padding: 0px 4px; color: var(--color-neutral-6); background: none"
              @click="chooseFanClass"
              >反选</a-button
            >
          </a-space>
          <a-space>
            <a-button @click="handleCancelAddMeal">取消</a-button>
            <a-button type="primary" @click="handleBeforeOkAddMeal">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-modal>
    <!-- 券包设置 -->
    <a-modal
      v-model:visible="couponVisible"
      title="券包设置"
      width="400px"
      @before-close="couponClose"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="couponRef" :auto-label-width="true" :model="couponForm">
        <a-form-item field="couponPlanId" hide-label>
          <a-select
            placeholder="请选择优惠券方案"
            allow-search
            v-model="couponForm.couponPlanId"
            allow-clear
            @change="changeCoupon"
          >
            <a-option v-for="item in couponList" :key="item.id" :value="item.id">{{
              item.planName
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-table
          :columns="couponColumns"
          style="width: 100%"
          :data="couponData"
          :pagination="false"
        >
          <template #columns>
            <a-table-column
              v-for="item of couponColumns"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'salary'" #cell="{ record }">
                <a-select
                  placeholder="请选择赠送套餐"
                  allow-search
                  v-model="record.setMealId"
                  allow-clear
                >
                  <a-option v-for="item in mealListse" :key="item.id" :value="item.id">{{
                    item.name
                  }}</a-option>
                </a-select>
              </template>
            </a-table-column>
          </template>
        </a-table>
        <a-form-item field="receiveType" style="margin-top: 15px" hide-label>
          <a-radio-group class="radio-bcg" v-model="couponForm.receiveType">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">自动赠送</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">手动领取</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="couponClose">取消</a-button>
          <a-button type="primary" @click="couponOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 复制渠道 -->
    <a-modal
      v-model:visible="copyVisible"
      title="复制系列"
      width="600px"
      @before-close="copyCel"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="copyRef" :auto-label-width="true" :model="copyForm">
        <a-form-item field="name" label="系列名称">
          {{ copyForm.name }}
        </a-form-item>
        <a-form-item field="copyType" label="复制类型">
          <a-radio-group class="radio-bcg" v-model="copyForm.copyType">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">一键复制</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">编辑并复制</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          v-if="copyForm.copyType == true"
          field="copyNum"
          label="复制数量"
          :rules="[{ required: true, message: '复制数量不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number v-model="copyForm.copyNum" placeholder="请输入复制数量" allow-clear />
        </a-form-item>
        <a-form-item
          field="copyMeal"
          v-if="copyForm.copyNum <= 1 && copyForm.copyType == true"
          label="复制套餐"
        >
          <a-radio-group class="radio-bcg" v-model="copyForm.copyMeal">
            <a-radio :value="true">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">复制套餐</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="false">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">不复制套餐</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="copyCel">取消</a-button>
          <a-button type="primary" @click="copyCancel">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 赠送余额 -->
    <a-modal
      v-model:visible="giveVisible"
      title="赠送余额"
      width="600px"
      @before-close="cancelGive"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="giveRef" :auto-label-width="true" :model="giveForm">
        <a-form-item
          field="giftsBalance"
          label="赠送余额"
          :rules="[{ required: true, message: '赠送余额不能为空' }]"
          :validate-trigger="['change', 'input']"
          asterisk-position="end"
        >
          <a-input-number
            v-model="giveForm.giftsBalance"
            placeholder="请输入赠送余额"
            allow-clear
          />
        </a-form-item>
        <a-form-item label="套餐介绍" field="giftsBalanceIntroduce">
          <RichTextEditor
            v-if="giveVisible"
            v-model="giveForm.giftsBalanceIntroduce"
            ref="richTextEditore"
          />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="cancelGive">取消</a-button>
          <a-button type="primary" @click="confirmGive">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-drawer
      :width="1000"
      :mask-closable="false"
      :visible="modal.visibles"
      @ok="handleSubmits"
      @cancel="beforeClose"
      @before-close="beforeClose"
      @close="beforeClose"
    >
      <template #title>
        {{ addTitle }}
        <span
          v-if="showTextwa == true"
          @click="showTextwa = !showTextwa"
          style="
            color: #3491fa;
            font-size: 12px;
            margin-left: 15px;
            margin-top: 3px;
            cursor: pointer;
          "
          >教程文字 <icon-eye style="font-size: 12px" />
        </span>
        <span
          v-else
          @click="showTextwa = !showTextwa"
          style="
            color: #86909c;
            font-size: 12px;
            margin-left: 15px;
            margin-top: 3px;
            cursor: pointer;
          "
          >教程文字 <icon-eye-invisible style="font-size: 12px" />
        </span>
      </template>
      <Scrollbar class="wrapper">
        <a-form ref="infoRefs" layout="vertical" :model="info.info">
          <a-collapse class="top" v-model:active-key="list1" expand-icon-position="right">
            <a-collapse-item key="1">
              <template #header>
                <div class="box">
                  <div class="line"></div>
                  <div class="text">系列信息</div>
                </div>
              </template>
              <template #extra>
                <div>{{ list1.length == 1 ? '收起' : '展开' }}</div>
              </template>
              <div style="display: flex; flex-wrap: wrap; width: 1000px; margin-top: 12px">
                <a-form-item
                  label="所属渠道"
                  field="channelId"
                  class="input516"
                  :rules="[{ required: true, message: ' ' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-select
                    placeholder="请选择所属渠道"
                    allow-search
                    @change="opNameFn"
                    v-model="info.info.channelId"
                    allow-clear
                    @clear="modal.opName = false"
                  >
                    <a-option v-for="item in channelNo" :key="item.id" :value="item.id">{{
                      item.name
                    }}</a-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  label="运营商"
                  field="operator"
                  class="input516"
                  :rules="[{ required: true, message: ' ' }]"
                  :validate-trigger="['change']"
                  asterisk-position="end"
                >
                  <a-radio-group class="radio-bcg" v-model="info.info.operator">
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">移动</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">联通</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="2">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">电信</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="3">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">广电</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  label="运营模式"
                  v-if="modal.opName == false"
                  class="input516"
                  field="operationMode"
                >
                  <a-radio-group class="radio-bcg" v-model="info.info.operationMode">
                    <a-radio :value="0">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">套餐包</div>
                        </div>
                      </template>
                    </a-radio>
                    <a-radio :value="1">
                      <template #radio="{ checked }">
                        <div
                          style="display: flex"
                          :class="{ 'custom-radio-card-checked': checked }"
                        >
                          <div className="custom-radio-card-mask">
                            <div className="custom-radio-card-mask-dot"></div>
                          </div>
                          <div className="custom-radio-card-title">共享池</div>
                        </div>
                      </template>
                    </a-radio>
                  </a-radio-group>
                  <template v-if="showTextwa" #extra>
                    <div
                      >运营模式套餐包：系统自行包装套餐；运营模式共享池：当前系列放池子给客户</div
                    >
                  </template>
                </a-form-item>
                <a-form-item
                  label="系列名称"
                  field="name"
                  class="input516"
                  :rules="[
                    { required: true, message: ' ' },
                    { minLength: 1, maxLength: 20, message: '长度在 1 - 20个字符' },
                  ]"
                  asterisk-position="end"
                >
                  <a-input
                    placeholder="请输入系列名称"
                    style="width: 100%"
                    v-model.trim="info.info.name"
                  /><template v-if="showTextwa" #extra>
                    <div>系列名称只有总后台可以看到</div>
                  </template>
                </a-form-item>
                <a-form-item
                  label="显示名称"
                  field="showName"
                  class="input516"
                  :rules="[
                    { required: true, message: ' ' },
                    { minLength: 1, maxLength: 20, message: '长度在 1 - 20个字符' },
                  ]"
                  asterisk-position="end"
                >
                  <a-input placeholder="请输入显示名称" v-model.trim="info.info.showName" />
                  <template v-if="showTextwa" #extra>
                    <div>显示名称在客户后台可以看到</div>
                  </template>
                </a-form-item>

                <!-- <a-form-item
            label="结算日期"
            v-if="modal.opName == false"
            class="input516"
            field="settlementDate"
          >
            <a-select placeholder="请选择结算日期" v-model="info.info.settlementDate" allow-clear>
              <a-option :value="0">月底结算</a-option>
              <a-option :value="1">26号结算</a-option>
            </a-select>
          </a-form-item> -->
                <a-form-item label="备注" class="input516" field="remarks">
                  <a-input placeholder="请输入备注" v-model.trim="info.info.remarks" />
                  <template v-if="showTextwa" #extra>
                    <div>备注非必填，可随意填写</div>
                  </template>
                </a-form-item>
              </div>
            </a-collapse-item>
          </a-collapse>
          <div class="centersss">
            <a-collapse
              class="top"
              style="margin-top: 0px"
              v-model:active-key="list2"
              expand-icon-position="right"
            >
              <a-collapse-item key="1">
                <template #header>
                  <div class="box">
                    <div class="line"></div>
                    <div class="text">实名设置</div>
                  </div>
                </template>
                <template #extra>
                  <div>{{ list2.length == 1 ? '收起' : '展开' }}</div>
                </template>
                <div style="display: flex; flex-wrap: wrap; width: 1000px; margin-top: 12px">
                  <a-form-item label="实名方案" class="input516" field="realNameProgramme">
                    <a-radio-group
                      @change="realNameSystemFn"
                      class="radio-bcg"
                      v-model="info.info.realNameProgramme"
                    >
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">单独实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">合并实名</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >单独实名：官方实名和系统实名分开，合并实名：系统实名和官方实名同步进行</div
                      >
                    </template>
                  </a-form-item>

                  <a-form-item
                    label="实名顺序"
                    v-if="info.info.realNameProgramme == 1"
                    class="input516"
                    field="realNameOrder"
                  >
                    <a-radio-group class="radio-bcg" v-model="info.info.realNameOrder">
                      <a-radio :value="3">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">无顺序</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">充值前实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">充值后实名</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >充值前实名：客户先进行实名，再充值套餐；充值后实名：客户先充值套餐，再进行实名</div
                      >
                    </template>
                  </a-form-item>

                  <a-form-item label="系统实名" class="input516" field="realNameSystem">
                    <a-radio-group class="radio-bcg" v-model="info.info.realNameSystem">
                      <a-radio :value="3" v-if="info.info.realNameProgramme == 0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">无需实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">短信验证码</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">国政通实名</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>单独实名：无需实名为不开启系统实名；合并实名：必选一个</div>
                    </template>
                  </a-form-item>

                  <a-form-item
                    label="官方实名"
                    class="input516"
                    v-if="info.info.realNameProgramme == 0"
                    field="realNameOfficial"
                  >
                    <a-radio-group
                      class="radio-bcg"
                      @change="realNameChange"
                      v-model="info.info.realNameOfficial"
                    >
                      <a-radio :value="-1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">无需实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="3">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">自由实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">充值前官方实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">充值后官方实名</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>自由实名为不强制进行官方实名</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    v-if="info.info.realNameOfficial == 1 || info.info.realNameOrder == 1"
                    label="套餐判断"
                    class="input516"
                    field="encoding"
                  >
                    <a-radio-group
                      class="radio-bcgs"
                      style="display: flex; justify-content: start; padding-left: 12px"
                      v-model="info.info.realNamePackageJudge"
                    >
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">无有效期订单允许实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">无有效期订单不允许实名</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>建议选择选择没有在使用订单不可官方实名</div>
                    </template>
                  </a-form-item>
                  <a-form-item label="实名类型" class="input516" field="realNameLinkType">
                    <a-radio-group class="radio-bcg" v-model="info.info.realNameLinkType">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">系统默认</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">无感实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="2">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">自定义</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="3">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">第三方</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>系统默认：系统提供实名链接；无感实名：不需要复制ICCID即可完成实名</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    v-if="info.info.realNameLinkType == 2"
                    label="实名链接"
                    class="input516"
                    field="realNameLink"
                    :rules="rules"
                    asterisk-position="end"
                  >
                    <a-input placeholder="请输入实名链接" v-model.trim="info.info.realNameLink" />
                    <template v-if="showTextwa" #extra>
                      <div>请输入官方实名的链接</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    class="input516"
                    v-if="info.info.realNameLinkType == 3"
                    label="渠道编码"
                    field="real_name_encoding"
                    :rules="[{ required: true, message: '请选择渠道编码' }]"
                    :validate-trigger="['change']"
                    asterisk-position="end"
                  >
                    <a-select
                      placeholder="请选择渠道编码"
                      v-model="info.info.realNameEncoding"
                      allow-clear
                    >
                      <a-option v-for="item in encoding" :key="item.name" :value="item.encoding">{{
                        item.name
                      }}</a-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item label="上游实名" class="input516" field="realNameUpper">
                    <a-radio-group class="radio-bcg" v-model="info.info.realNameUpper">
                      <a-radio :value="3">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">无需实名</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">上游提供实名链接</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">上游实名状态进行跳转</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >上游实名指的是需要客户单独在上游系统进行系统实名，注意这个不是官方实名</div
                      >
                    </template>
                  </a-form-item>

                  <a-form-item
                    class="input516"
                    v-if="info.info.realNameUpper === 0 || info.info.realNameUpper === 1"
                    label="上游链接"
                    field="realNameUpperUrl"
                    :rules="rules"
                    asterisk-position="end"
                  >
                    <a-input
                      placeholder="请输入上游实名链接"
                      v-model.trim="info.info.realNameUpperUrl"
                    />
                    <template v-if="showTextwa" #extra>
                      <div>输入上游提供的系统实名链接</div>
                    </template>
                  </a-form-item>

                  <a-form-item label="实名弹窗" class="input516">
                    <a-radio-group
                      v-model="info.info.realNameAlert"
                      @change="
                        info.info.realNameAlert == false
                          ? (info.info.realNameCopyCard = false)
                          : (info.info.realNameCopyCard = false)
                      "
                      class="radio-bcg"
                    >
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>开启：展示实名卡号的弹窗关闭；关闭：不展示实名卡号的弹窗</div>
                    </template>
                  </a-form-item>

                  <a-form-item
                    class="input516"
                    v-if="info.info.realNameAlert == false"
                    style="margin-bottom: 0"
                    label="复制卡号"
                    field="realNameCopyCard"
                  >
                    <a-radio-group class="radio-bcg" v-model="info.info.realNameCopyCard">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">复制</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">不复制</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>选择复制卡号时，客户在官方实名步骤，系统会自动复制卡号</div>
                    </template>
                  </a-form-item>
                </div>
              </a-collapse-item>
            </a-collapse>
          </div>
          <div class="centersss">
            <a-collapse
              class="top"
              v-if="info.info.operationMode == 0 || info.info.operationMode == undefined"
              v-model:active-key="list3"
              expand-icon-position="right"
            >
              <a-collapse-item key="1">
                <template #header>
                  <div class="box">
                    <div class="line"></div>
                    <div class="text">支付设置</div>
                  </div>
                </template>
                <template #extra>
                  <div>{{ list3.length == 1 ? '收起' : '展开' }}</div>
                </template>
                <div style="display: flex; flex-wrap: wrap; width: 1000px; margin-top: 12px">
                  <a-form-item label="自动切换" class="input516" field="paySwitch">
                    <a-radio-group class="radio-bcg" v-model="info.info.paySwitch">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >当微信支付的支付大于两个时，客户选择微信发起支付，系统随机选择一个支付使用</div
                      >
                    </template>
                  </a-form-item>
                  <a-form-item label="默认支付" class="input516" field="payDefault">
                    <a-select
                      placeholder="请选择默认支付"
                      v-model="info.info.payDefault"
                      allow-search
                      allow-clear
                    >
                      <a-option :value="0">余额支付</a-option>
                      <a-option :value="1">支付宝支付</a-option>
                      <a-option :value="2">微信支付</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div>客户进行支付时，会自动默认一个支付，以便客户快捷的进行支付</div>
                    </template>
                  </a-form-item>
                  <a-form-item label="折叠支付" class="input516" field="payFold">
                    <a-select
                      placeholder="请选择"
                      allow-clear
                      v-model="info.info.payFold"
                      multiple
                      :max-tag-count="1"
                    >
                      <a-option :value="0">余额支付</a-option>
                      <a-option :value="1">支付宝支付</a-option>
                      <a-option :value="2">微信支付</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div>不选择为不开启，选择的支付为不折叠的支付</div>
                    </template>
                  </a-form-item>
                  <a-form-item label="支付推荐" class="input516" field="payRecommendation">
                    <a-select
                      placeholder="请选择支付推荐"
                      allow-clear
                      v-model="info.info.payRecommendation"
                      multiple
                      :max-tag-count="1"
                    >
                      <a-option :value="0">余额支付</a-option>
                      <a-option :value="1">支付宝支付</a-option>
                      <a-option :value="2">微信支付</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div>选择后，支付后面会加上推荐的标志</div>
                    </template>
                  </a-form-item>
                  <a-form-item label="优惠立减" class="input516" field="payRandomCouponAdd">
                    <a-input-group style="width: 100%">
                      <a-input-number
                        :min="0.01"
                        v-model="info.info.payRandomCouponAdd"
                        placeholder="最低金额"
                      />
                      <a-input-number
                        :min="0.01"
                        v-model="info.info.payRandomCouponEnd"
                        placeholder="最高金额"
                      />
                    </a-input-group>
                    <template v-if="showTextwa" #extra>
                      <div>优惠券立减金额，客户支付时根据输入的金额，进行随机立减</div>
                    </template>
                  </a-form-item>
                  <a-form-item label="套餐立减" class="input516" field="payRandomPackageAdd">
                    <a-input-group style="width: 100%">
                      <a-input-number
                        :min="0.01"
                        v-model="info.info.payRandomPackageAdd"
                        placeholder="最低金额"
                      />
                      <a-input-number
                        :min="0.01"
                        v-model="info.info.payRandomPackageEnd"
                        placeholder="最高金额"
                      />
                    </a-input-group>
                    <template v-if="showTextwa" #extra>
                      <div>套餐立减金额，客户支付时根据输入的金额，进行随机立减</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="余额立减"
                    style="margin-bottom: 0"
                    class="input516"
                    field="payRandomBalanceAdd"
                  >
                    <a-input-group style="width: 100%">
                      <a-input-number
                        :min="0.01"
                        v-model="info.info.payRandomBalanceAdd"
                        placeholder="最低金额"
                      />
                      <a-input-number
                        :min="0.01"
                        v-model="info.info.payRandomBalanceEnd"
                        placeholder="最高金额"
                      />
                    </a-input-group>
                    <template v-if="showTextwa" #extra>
                      <div>余额立减金额，客户支付时根据输入的金额，进行随机立减</div>
                    </template>
                  </a-form-item>
                  <!-- <a-form-item label="取消提示" class="input516" field="payCancelTips">
                    <a-textarea
                      v-model="info.info.payCancelTips"
                      placeholder="请输入取消提示"
                      allow-clear
                    />
                  </a-form-item> -->
                </div>
              </a-collapse-item>
            </a-collapse>
          </div>
          <div class="centersss" style="margin-bottom: 5px">
            <a-collapse class="top" v-model:active-key="list4" expand-icon-position="right">
              <a-collapse-item key="1">
                <template #header>
                  <div class="box">
                    <div class="line"></div>
                    <div class="text">其他设置</div>
                  </div>
                </template>
                <template #extra>
                  <div>{{ list4.length == 1 ? '收起' : '展开' }}</div>
                </template>
                <div style="display: flex; flex-wrap: wrap; width: 1000px; margin-top: 12px">
                  <a-form-item
                    label="到期时间"
                    v-if="modal.opName == true && info.info.operationMode !== 1"
                    class="input516"
                    field="expirationTime"
                  >
                    <a-radio-group class="radio-bcg" v-model="info.info.expirationTime">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">跟随上游</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">系统数据</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item label="天模式" class="input516" v-if="info.info.operationMode !== 1">
                    <a-radio-group class="radio-bcg" v-model="info.info.dayTimeType">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">今天9点购买今天凌晨结束</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">今天9点购买明天9点结束</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>建议选择今天9点购买明天9点结束</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="无限流量"
                    field="unlimitedTrafficThreshold"
                    class="input516"
                    v-if="info.info.operationMode !== 1"
                  >
                    <a-input-number
                      :min="0"
                      v-model="info.info.unlimitedTrafficThreshold"
                      placeholder="请输入无限流量"
                      hide-button
                      allow-clear
                    >
                      <template #append>
                        <a-button
                          style="width: 100%"
                          type="primary"
                          @click="change1024(info.info.unlimitedTrafficThreshold)"
                        >
                          换算
                        </a-button>
                      </template>
                    </a-input-number>
                    <template v-if="showTextwa" #extra>
                      <div>总流量大于填写的无限流量就会显示无限</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="时间弹窗"
                    class="input516"
                    v-if="info.info.operationMode !== 1"
                  >
                    <a-radio-group class="radio-bcg" v-model="info.info.timePopup">
                      <a-radio :value="0">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">强制显示</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="1">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">手动显示</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >强制显示：客户必须选择查看时间弹窗；手动点击：客户手动点击查看时间弹窗</div
                      >
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="强制预存"
                    class="input516"
                    v-if="info.info.operationMode !== 1"
                  >
                    <a-radio-group class="radio-bcg" v-model="info.info.preStorage">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div>开启：强制客户使用余额进行支付，关闭：不强制客户使用余额进行支付</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="套餐限制"
                    class="input516"
                    field="setMealRestrictions"
                    v-if="info.info.operationMode !== 1 && info.info.preStorage == false"
                  >
                    <a-radio-group class="radio-bcg" v-model="info.info.setMealRestrictions">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >开启：加油包可以使用余额进行支付，关闭：加油包不可以使用余额进行支付</div
                      >
                    </template>
                  </a-form-item>
                  <a-form-item label="显示类型" class="input516" field="showImage">
                    <a-radio-group class="radio-bcg" v-model="info.info.showImage">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                    <template v-if="showTextwa" #extra>
                      <div
                        >开启：充值端套餐列表显示套餐图片,每个套餐都上传图片关闭：充值端套餐列表不变</div
                      >
                    </template>
                  </a-form-item>
                  <a-form-item label="装修方案" class="input516" field="decorationPlanId">
                    <a-select
                      placeholder="请选择装修方案"
                      allow-search
                      v-model="info.info.decorationPlanId"
                      allow-clear
                    >
                      <a-option v-for="item in decorationList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div
                        >设置装修方案，
                        <span style="color: #3491fa" @click="quickRoute('/other/decoration/plan')"
                          >点此立即设置装修方案</span
                        >
                      </div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="公告方案"
                    class="input516"
                    field="clientNoticePlanId"
                    v-if="info.info.operationMode !== 1"
                  >
                    <a-select
                      placeholder="请选择公告方案"
                      allow-search
                      v-model="info.info.clientNoticePlanId"
                      allow-clear
                    >
                      <a-option v-for="item in noticeFangList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div
                        >设置公告方案，
                        <span style="color: #3491fa" @click="quickRoute('/marketing/client/notice')"
                          >点此立即设置公告方案</span
                        >
                      </div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="预存金额"
                    class="input516"
                    field="rechargeId"
                    v-if="info.info.preStorage && info.info.operationMode !== 1"
                    :rules="[{ required: true, message: '请选择预存金额方案' }]"
                    :validate-trigger="['change']"
                    asterisk-position="end"
                  >
                    <a-select
                      placeholder="请选择预存金额方案"
                      allow-search
                      v-model="info.info.rechargeId"
                      allow-clear
                    >
                      <a-option v-for="item in recharge" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div
                        >设置卡显示的预存余额，<span
                          style="color: #3491fa"
                          @click="quickRoute('/marketing/recharge')"
                          >点此立即设置预存余额方案</span
                        ></div
                      >
                    </template>
                  </a-form-item>

                  <a-form-item
                    v-if="!info.info.preStorage && info.info.operationMode !== 1"
                    class="input516"
                    label="预存金额"
                    field="rechargeId"
                  >
                    <a-select
                      placeholder="请选择预存金额方案"
                      allow-search
                      v-model="info.info.rechargeId"
                      allow-clear
                    >
                      <a-option v-for="item in recharge" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div
                        >设置卡显示的预存余额，<span
                          style="color: #3491fa"
                          @click="quickRoute('/marketing/recharge')"
                          >点此立即设置预存余额方案</span
                        ></div
                      >
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="限速方案"
                    v-if="modal.opName == false && info.info.operationMode !== 1"
                    class="input516"
                    field="speedLimitId"
                  >
                    <a-select
                      placeholder="请选择限速方案"
                      allow-search
                      v-model="info.info.speedLimitId"
                      allow-clear
                    >
                      <a-option v-for="item in speed" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div
                        >对卡进行限速设置，
                        <span style="color: #3491fa" @click="quickRoute('/polling/speed/limit')"
                          >点此立即设置限速方案</span
                        >
                      </div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="达量断网"
                    v-if="modal.opName == false && info.info.operationMode !== 1"
                    class="input516"
                    field="disconnectionId"
                  >
                    <a-select
                      placeholder="请选择达量断网"
                      allow-search
                      v-model="info.info.disconnectionId"
                      allow-clear
                    >
                      <a-option v-for="item in disconnectionList" :key="item.id" :value="item.id">{{
                        item.name
                      }}</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div
                        >对卡进行达量断网，
                        <span style="color: #3491fa" @click="quickRoute('/polling/disconnection')"
                          >点此立即设置达量断网方案</span
                        >
                      </div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="极速会员"
                    class="input516"
                    field="speedVip"
                    v-if="info.info.operationMode !== 1"
                  >
                    <a-select
                      placeholder="请选择极速会员"
                      allow-search
                      v-model="info.info.speedVip"
                      allow-clear
                      multiple
                      :max-tag-count="1"
                    >
                      <a-option v-for="item in speedList" :key="item.id" :value="item.id">{{
                        item.planName
                      }}</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div
                        >设置极速会员，
                        <span style="color: #3491fa" @click="quickRoute('/marketing/speed')"
                          >点此立即设置极速会员方案</span
                        >
                      </div>
                    </template>
                  </a-form-item>

                  <!-- <a-form-item label="达量断网" field="disconnection">
            <a-select
              placeholder="请选择达量断网"
              v-model="info.info.disconnection"
              allow-clear
          
              @clear="log"
            >
              <a-option :value="0">总流量断网</a-option>
              <a-option :value="1">天流量断网</a-option>
            </a-select>
          </a-form-item>

          <a-form-item
            label="断网阈值"
            v-show="info.info.disconnection == 0 || info.info.disconnection == 1"
            field="disconnectionThreshold"
          >
            <a-input
              v-model="info.info.disconnectionThreshold"
              placeholder="请输入断网阈值"
              allow-clear
            />
          </a-form-item> -->

                  <a-form-item
                    label="停机阈值"
                    v-if="modal.opName == false && info.info.operationMode !== 1"
                    class="input516"
                    field="shutdownThreshold"
                  >
                    <a-input-group style="width: 100%">
                      <a-input
                        v-model="info.info.shutdownThreshold"
                        placeholder="请输入停机阈值"
                        allow-clear
                        ><template #append>
                          <a-radio-group v-model="info.info.shutdownThresholdType">
                            <a-radio :value="0">
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div>
                                  </div>
                                  <div className="custom-radio-card-title">固定流量</div>
                                </div>
                              </template>
                            </a-radio>
                            <a-radio :value="1">
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div>
                                  </div>
                                  <div className="custom-radio-card-title">百分比</div>
                                </div>
                              </template>
                            </a-radio>
                          </a-radio-group>
                        </template>
                      </a-input>
                      <!-- <a-select
                      style="width: 25%"
                      v-model="info.info.shutdownThresholdType"
                      placeholder="请选择停机阈值类型"
                    >
                      <a-option :value="0">固定流量</a-option>
                      <a-option :value="1">百分比</a-option>
                    </a-select> -->
                    </a-input-group>
                    <template v-if="showTextwa" #extra>
                      <div>流量剩余不足多少MB，系统轮询到会提前执行停机，防止用户用超</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="提前停机"
                    class="input516"
                    field="shutdownEarly"
                    v-if="info.info.operationMode !== 1"
                  >
                    <a-input-group style="width: 100%">
                      <a-input
                        v-model="info.info.shutdownEarly"
                        allow-clear
                        placeholder="请输入提前停机时间"
                      >
                        <template #append>
                          <a-radio-group v-model="info.info.shutdownEarlyType">
                            <a-radio :value="0">
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div>
                                  </div>
                                  <div className="custom-radio-card-title">时</div>
                                </div>
                              </template>
                            </a-radio>
                            <a-radio :value="1">
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div>
                                  </div>
                                  <div className="custom-radio-card-title">天</div>
                                </div>
                              </template>
                            </a-radio>
                          </a-radio-group>
                        </template>
                      </a-input>

                      <!-- <a-select
                      style="width: 15%"
                      v-model="info.info.shutdownEarlyType"
                      placeholder="请选择提前停机类型"
                    >
                      <a-option :value="0">时</a-option>
                      <a-option :value="1">天</a-option>
                    </a-select> -->
                    </a-input-group>
                    <template v-if="showTextwa" #extra>
                      <div>到期时间不足N天/N时，系统轮询到会提前执行停机，提醒客户续费</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    label="限制充值"
                    class="input516"
                    field="limitRecharge"
                    v-if="info.info.operationMode !== 1"
                  >
                    <a-input-group style="width: 100%">
                      <a-input
                        v-model="info.info.limitRecharge"
                        placeholder="请输入限制充值天数"
                        allow-clear
                      >
                        <template #append>
                          <a-radio-group v-model="info.info.limitRechargeType">
                            <a-radio :value="0">
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div>
                                  </div>
                                  <div className="custom-radio-card-title">时</div>
                                </div>
                              </template>
                            </a-radio>
                            <a-radio :value="1">
                              <template #radio="{ checked }">
                                <div
                                  style="display: flex"
                                  :class="{ 'custom-radio-card-checked': checked }"
                                >
                                  <div className="custom-radio-card-mask">
                                    <div className="custom-radio-card-mask-dot"></div>
                                  </div>
                                  <div className="custom-radio-card-title">天</div>
                                </div>
                              </template>
                            </a-radio>
                          </a-radio-group>
                        </template>
                      </a-input>
                      <!-- <a-select
                      style="width: 15%"
                      v-model="info.info.limitRechargeType"
                      placeholder="请选择提前停机类型"
                    >
                      <a-option :value="0">时</a-option>
                      <a-option :value="1">天</a-option>
                    </a-select> -->
                    </a-input-group>
                    <template v-if="showTextwa" #extra>
                      <div>限制客户在26号清零和月底清零前N天/时，禁止充值本月</div>
                    </template>
                  </a-form-item>
                  <a-form-item
                    class="input516"
                    label="次月提交"
                    v-if="modal.opName == true && info.info.operationMode !== 1"
                  >
                    <a-radio-group class="radio-bcg" v-model="info.info.nextSubmit">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item
                    class="input516"
                    label="订单提交"
                    v-if="modal.opName == true && info.info.operationMode !== 1"
                  >
                    <a-radio-group class="radio-bcg" v-model="info.info.orderSubmit">
                      <a-radio :value="true">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">开启</div>
                          </div>
                        </template>
                      </a-radio>
                      <a-radio :value="false">
                        <template #radio="{ checked }">
                          <div
                            style="display: flex"
                            :class="{ 'custom-radio-card-checked': checked }"
                          >
                            <div className="custom-radio-card-mask">
                              <div className="custom-radio-card-mask-dot"></div>
                            </div>
                            <div className="custom-radio-card-title">关闭</div>
                          </div>
                        </template>
                      </a-radio>
                    </a-radio-group>
                  </a-form-item>
                  <a-form-item label="轮询条件" class="input516" field="pollingCondition">
                    <a-select
                      placeholder="请选择轮询条件"
                      v-model="info.info.pollingCondition"
                      allow-clear
                    >
                      <a-option :value="0">所有卡</a-option>
                      <a-option :value="1">已充值卡</a-option>
                      <a-option :value="2">已充值卡+已实名卡</a-option>
                      <a-option :value="3">已充值卡+已实名卡+已激活卡</a-option>
                    </a-select>
                    <template v-if="showTextwa" #extra>
                      <div>轮询条件请勿随意选择所有卡，选择轮询所有卡时，轮询速度会特别慢</div>
                    </template>
                  </a-form-item>
                </div>
              </a-collapse-item>
            </a-collapse>
          </div>
        </a-form>
      </Scrollbar>
      <template #footer>
        <a-space v-if="info.info.id">
          <a-button @click="beforeClose">取消</a-button>
          <a-button type="primary" @click="handleSubmits">确定</a-button>
        </a-space>
        <div v-else style="display: flex; justify-content: space-between">
          <a-checkbox v-model="checked1">继续新建下一个系列</a-checkbox>
          <a-space>
            <a-button @click="beforeClose">取消</a-button>
            <a-button type="primary" @click="handleSubmits">确定</a-button>
          </a-space>
        </div>
      </template>
    </a-drawer>

    <!-- 图标编辑 -->
    <a-modal
      v-model:visible="modal.visibleIconForm"
      @before-close="beforeCloseIconForm"
      :mask-closable="false"
      title-align="start"
    >
      <template #title> 图标编辑 </template>
      <a-form ref="iconRef" :model="iconForm" :labelCol="{ span: 4 }">
        <a-form-item label="图标名称" field="name" :rules="rules" asterisk-position="end">
          <a-input placeholder="请输入图标名称" v-model.trim="iconForm.name" />
        </a-form-item>
        <a-form-item
          v-if="iconForm.id"
          label="链接类型"
          field="real_name_link_type"
          :rules="[{ required: true, message: '请选择链接类型' }]"
          :validate-trigger="['change']"
          asterisk-position="end"
        >
          <a-select placeholder="请选择链接类型" v-model="iconForm.type" allow-clear>
            <a-option :value="0">系统链接</a-option>
            <a-option :value="1">自定义</a-option>
          </a-select>
        </a-form-item>
        <a-form-item
          v-if="iconForm.type == 1"
          label="跳转链接"
          field="url"
          :rules="rules"
          asterisk-position="end"
        >
          <a-input placeholder="请输入跳转链接" v-model.trim="iconForm.url" />
        </a-form-item>
        <a-form-item label="图标上传" field="url" :rules="rules">
          <a-upload
            ref="sslU"
            :auto-upload="false"
            :action="upSsl"
            :limit="1"
            @success="onSsl"
            @error="onError"
          >
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="iconForm.url">
                <img :src="iconForm.url" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="beforeCloseIconForm">取消</a-button>
          <a-button type="primary" @click="realNameOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <!-- 图标设置 -->
    <a-modal
      v-model:visible="modal.visibleIcon"
      @before-close="beforeCloseRealName"
      title-align="start"
      :mask-closable="false"
      width="660px"
    >
      <template #title> 图标设置 </template>
      <a-form ref="seachForm" layout="inline" :model="form">
        <a-form-item field="operator" hide-label>
          <a-select class="width100" v-model="form.operator" placeholder="请选择系列" allow-clear>
            <a-option v-for="item in series" :key="item.id" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="btns" hide-label>
          <a-space :size="15">
            <a-button type="primary" html-type="submit">复制数据</a-button>
            <a-button
              ><template #icon>
                <icon-delete />
              </template>
              <!-- Use the default slot to avoid extra spaces -->
              <template #default>重置数据</template></a-button
            >
          </a-space>
        </a-form-item>
        <a-form-item field="btns" hide-label>
          <a-space :size="15">
            <a-button type="primary" html-type="submit" @click="modal.visibleIconForm = true"
              >新建</a-button
            >
          </a-space>
        </a-form-item>
      </a-form>
      <a-table
        :bordered="{ wrapper: true, cell: tables.bordered }"
        :stripe="(tables.striped as boolean)"
        :loading="tables.tableLoading"
        :data="iconList"
        :pagination="false"
        :column-resizable="true"
        :rowKey="rowKey"
        :columns="tableColumns.iconList"
        table-layout-fixed
        hide-expand-button-on-empty
        :default-expand-all-rows="true"
        @change="handleChange"
        :draggable="{ type: 'handle', width: 40 }"
      >
        <template #columns>
          <a-table-column
            v-for="item of tableColumns.iconList"
            :key="item.key"
            :align="item.align"
            :title="(item.title as string)"
            :width="item.width"
            :data-index="(item.key as string)"
            :fixed="item.fixed"
            :ellipsis="true"
            :tooltip="false"
          >
            <template v-if="item.key === 'preStorage'" #cell="{ record }">
              <a-space>
                <a-tag v-if="record.preStorage" color="arcoblue">强制</a-tag>
                <a-tag v-else color="red">不强制</a-tag>
              </a-space>
            </template>
            <template v-if="item.key === 'realNameSystem'" #cell="{ record }">
              <a-space>
                <a-tag v-if="record.realNameSystem == 0" color="arcoblue">短信验证</a-tag>
                <a-tag v-else-if="record.realNameSystem == 1" color="red">国政通验证</a-tag>
                <div v-else>---</div>
              </a-space>
            </template>
            <template v-if="item.key === 'actions'" #cell="{ record }">
              <a-space>
                <a-button size="small" type="text" class="butten" @click="infoDepartments(record)">
                  编辑
                </a-button>
                <a-button
                  status="warning"
                  size="small"
                  class="butten"
                  type="text"
                  @click="copy(record)"
                >
                  复制
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
      <template #footer>
        <!-- <a-space>
          <a-button @click="beforeCloseRealName">取消</a-button>
          <a-button type="primary" @click="realNameOk">确定</a-button>
        </a-space> -->
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'ShoppingGoodss',
  }
</script>

<script lang="ts" setup>
  import {
    seriesList,
    encodingList,
    addSeries,
    deleteSeries,
    updateSeries,
    exportSeriesList,
    upSsl,
    mealLists,
    couponplan,
    couponplanget,
    addMealClass,
    getMealClassList,
    updateMealClass,
    delMealClass,
    sortMealClass,
    getClassMeals,
    fenpeiMeal,
    giftsBalance,
  } from '@/api/url'
  import { useRouter } from 'vue-router'

  import useCommonStore from '@/store/modules/common'
  import { post, get, formpost } from '@/api/http'
  import { usePagination, useRowKey, useTable } from '@/hooks/table'
  import { onMounted, reactive, ref } from 'vue'

  import _ from 'lodash-es'
  const router = useRouter()
  import { Message, Modal } from '@arco-design/web-vue'
  import { Info } from '@icon-park/vue-next'

  function changeState(val: any) {
    post({
      url: updateSeries,
      data: {
        ...val,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        doRefresh()
      }
    })
  }
  const couponVisible = ref(false)
  const couponForm: any = ref({
    planId: '',
    receiveType: 0,
  })
  const showTextwa = ref(true)
  const typeShow = ref(false)
  const couponRef = ref()
  const useCommon = useCommonStore()
  const couponList: any = ref([])
  const list1 = ref(['1'])
  const list2 = ref(['1'])
  const list3 = ref(['1'])
  const list4 = ref(['1'])

  const table = useTable()

  const pagination = usePagination(doRefresh)

  const infoRef = ref()
  const classRef = ref()
  const seachForm = ref()

  const RealName = ref()

  const loading = ref(false)

  const channelNo = ref()

  const encoding: any = ref([])

  const recharge: any = ref([])

  const speed: any = ref([])

  const copyRef = ref()

  const copyNum = ref(0)

  const copyVisible = ref(false)
  const giveVisible = ref(false)
  const checked1 = ref(false)
  const giveForm = ref({
    giftsBalanceIntroduce: '',
    giftsBalance: '',
  })
  const copyForm = ref({
    id: '',
    name: '',
    copyType: true,
    copyNum: 1,
    copyMeal: true,
  })

  const modal = reactive({
    addMealVisible: false,
    classVisible: false,
    visible: false,
    visibles: false,
    visibleRealName: false,
    visibleIcon: false,
    visibleIconForm: false,
    key: '1',
    opName: false,
  })

  const form = reactive({
    channelId: '', //渠道id
    name: '', //系列类型
    operator: '', //运营商
    preStorage: '', // 强制预存
    addTime: '',
    endTime: '',
    operationMode: '',
    pollingCondition: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })

  const info: any = reactive({
    info: {
      decorationPlanId: '',
      showImage: false,
      unlimitedTrafficThreshold: '',
      realNameLinkType: 0, //实名链接类型 0系统链接 1跟随上游 2自定义 3第三方链接
      realNameLink: '', //实名链接 当realNameLinkType为 0或1时该字段为null 2自定义链接 3接口地址
      realNameEncoding: '',
      speedVip: [], //极速会员
      channelId: '', //渠道ID
      rechargeId: '', //预存方案ID
      operator: 0, //运营商 0中国移动 1中国联通 2中国电信 3中国广电
      name: '', //系列名称
      showName: '', //显示名称
      realNameProgramme: 0, //实名方案 0单独实名 1合并实名
      realNameSystem: 3, //系统实名 null不进行实名 0短信实名 1国政通实名
      realNameOfficial: 3, //官方实名 当realNameProgramme为0时该参数有效 null不进行判断 0充值前官方实名, 1充值后官方实名
      realNameOrder: 3, //实名顺序 当realNameProgramme为1时该参数有效 null不进行判断 0充值前实名 1充值后实名
      realNameUpper: 3, //上游实名 null不需要实名 0上游提供实名连接 1上游实名状态进行跳转
      realNameUpperUrl: '', //上游实名连接 当realNameUpper为0时该字段必填写
      realNamePackageJudge: true, //套餐判断, 是否允许官方实名 true没有有效期套餐允许官方实名 false没有有效期套餐不允许官方实名
      preStorage: false, //强制预存true强制, false不强制
      expirationTime: 1, //到期时间 0跟随上游 1系统
      takeEffectTime: true, //生效时间 true开启, false关闭
      speedLimitId: '', //限速方案ID
      disconnection: '', //达量断网 0总流量断网 1天流量断网
      disconnectionThreshold: '', //达量断网阈值
      limitRecharge: '', //限制月底前X多天不能充值 当为null时不限制
      shutdownThreshold: '', //停机阈值, 流量低于X时进行停机 当为null时不限制
      shutdownEarlyType: 1, //提前停机类型 提现停机类型 0小时 1天
      shutdownEarly: '', //提前停机
      close: false, //状态true关闭,  false正常
      realNameAlert: true, //true开启,  false关闭
      timeModeDay: '', // 时间模式 0：整30天 1：最后一天提前一天23:59 2：最后一天00:00
      timeModeMonth: '',
      dayTimeType: 0,
      timePopup: 0, // 时间弹窗 0强制弹出 1手动点击
      setMealRestrictions: true, // 套餐限制 开启：加油包可以使用余额进行支付，关闭：加油包不可以使用余额进行支付
      realNameCopyCard: false, // 复制卡号：true复制 false不复制
      remarks: '', // 备注
      orderSubmit: true, //提交订单 0不提交 1提交
      nextSubmit: true, //次月提交 0不提交 1提交
      pollingCondition: '', //轮询条件 为null不轮询 0所有卡 1已充值卡 2已充值卡+已实名卡 3已充值卡+已实名卡+已激活卡
      operationMode: 0, //运营模式 当渠道为流量池时该参数才有效 0套餐包模式 1共享池模式
      settlementDate: '', // 结算日期 当渠道为流量池时该参数才有效 0-月底结算 1-26号结算
      limitRechargeType: 1, // 限制充值类型 0小时 1天
      paySwitch: false, //自动切换
      payDefault: '', //默认支付 0余额 1支付宝 2微信 为null不选择
      payFold: [], //折叠支付 0余额 1支付宝 2微信 为null不折叠
      payRecommendation: [], //推荐支付 0余额 1支付宝 2微信 为null不推荐
      payRandomBalanceAdd: '', // 余额充值随机立减开始金额
      payRandomBalanceEnd: '', // 余额充值随机立减结束金额
      payRandomPackageAdd: '', // 套餐充值随机立减开始金额
      payRandomPackageEnd: '', // 套餐充值随机立减结束金额
      payRandomCouponAdd: '', // 优惠卷充值随机立减开始金额
      payRandomCouponEnd: '', // 优惠卷充值随机立减结束金额
      payCancelTips: '',
      shutdownThresholdType: 0,
      clientNoticePlanId: '', //公告方案
      // couponPlanId: '', //优惠券方案
    },
    disabled: false,
  })

  const iconForm: any = ref({
    name: '',
    type: 1,
    url: '',
  })

  const treeData = reactive({
    list: [{ api: true, encoding: 'YINGMENG', name: '迎梦', url: 'http://www.yingmengyun.com' }],
    parentId: [],
    option: {},
  })

  const iconList: any = ref([])

  // 接口地址
  const rules = [
    {
      validator: (value: string, cb: (arg0: string) => void) => {
        return new Promise<void>((resolve) => {
          const rule1 = /(http|https):\/\/\S*/
          if (!rule1.test(value)) {
            cb('请输入正确的接口地址')
          }
          resolve()
        })
      },
    },
  ]

  const couponColumns = ref([
    {
      title: '券包名称',
      dataIndex: 'couponName',
      key: 'couponName',
    },
    {
      title: '赠送套餐',
      dataIndex: 'salary',
      key: 'salary',
    },
  ])

  const couponColumns1 = ref([
    {
      title: '分类名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      width: 190,
    },
    {
      title: '操作',
      dataIndex: 'actions',
      key: 'actions',
      width: 160,
    },
  ])

  const couponData: any = ref([])

  const tableColumns: any = reactive({
    list: [
      {
        title: '系列ID',
        key: 'id',
        dataIndex: 'id',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '系列名称',
        key: 'name',
        dataIndex: 'name',
        align: 'left',
        checked: true,
        width: 220,
      },
      // {
      //   title: '装修方案',
      //   key: 'channelName',
      //   dataIndex: 'channelName',
      //   align: 'left',
      //   checked: true,
      //   width: 220,
      // },
      {
        title: '渠道名称',
        key: 'channelName',
        dataIndex: 'channelName',
        align: 'left',
        checked: true,
        width: 220,
      },
      {
        title: '轮询状态',
        key: 'pollingCondition',
        dataIndex: 'pollingCondition',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '强制预存',
        key: 'preStorage',
        dataIndex: 'preStorage',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '订单提交',
        key: 'orderSubmit',
        dataIndex: 'orderSubmit',
        align: 'left',
        checked: true,
        width: 100,
      },

      {
        title: '创建时间',
        key: 'createTime',
        dataIndex: 'createTime',
        align: 'left',
        checked: true,
        width: 190,
      },
      {
        title: '系列备注',
        key: 'remarks',
        dataIndex: 'remarks',
        align: 'left',
        checked: true,
        width: 287,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'left',
        checked: true,
        width: 220,
        fixed: 'right',
      },
    ],
    iconList: [
      {
        title: '图标排序',
        key: 'id',
        dataIndex: 'id',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '图标名称',
        key: 'showName',
        dataIndex: 'showName',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '图标',
        key: 'operator',
        dataIndex: 'operator',
        align: 'left',
        checked: true,
        width: 100,
      },

      {
        title: '跳转链接',
        key: 'channelName',
        dataIndex: 'channelName',
        align: 'left',
        checked: true,
        width: 100,
      },
      {
        title: '图标状态',
        key: 'number',
        dataIndex: 'number',
        align: 'left',
        checked: true,
        width: 150,
      },
      {
        title: '操作',
        key: 'actions',
        dataIndex: 'actions',
        align: 'left',
        checked: true,
        width: 120,
        fixed: 'right',
      },
    ],
  })
  const richTextEditore = ref()
  function realNameChange() {
    if (info.info.realNameOfficial == 1) {
      info.info.realNamePackageJudge = true
    }
  }
  const openGive = (val) => {
    giveForm.value.id = val.id
    if (val.giftsBalance !== null) {
      giveForm.value.giftsBalance = val.giftsBalance
      giveForm.value.giftsBalanceIntroduce = val.giftsBalanceIntroduce
    }
    giveVisible.value = true
  }
  //打开套餐分类
  function openTypeFn(val: any) {
    typeShow.value = true
    subForm.form.seriesId = val.id
    getClassList()
    getMealLists()
  }

  const addTitle = ref('新建系列')

  const series: any = ref([])
  const iconRef = ref()

  const rowKey = useRowKey('id')

  // const log = () => {
  //   info.info.disconnection = null
  // }
  //快捷跳转
  function quickRoute(val: any) {
    window.open(window.location.protocol + '//' + window.location.host + val)
  }
  //系列绑定券包详情
  const mealListse: any = ref([])
  function couponOpen(val: any) {
    couponForm.value.seriesId = val.id
    useCommon
      .couponListFn()
      .then((res) => {
        couponList.value = res.data
      })
      .catch(() => {})
    get({
      url: mealLists,
      data: () => {
        return {
          seriesIds: val.id,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        mealListse.value = res.data
        get({
          url: couponplanget,
          data: () => {
            return {
              seriesId: val.id,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            if (res.data) {
              const lista = couponList.value.find((i: any) => i.id === res.data.couponPlanId)
              lista.seriesCouponList.forEach((element: any) => {
                res.data.seriesCouponGiveSetMealList.forEach((item: any) => {
                  if (element.id == item.couponId) {
                    element.setMealId = item.setMealId
                  }
                })
              })
              couponData.value = lista.seriesCouponList
              couponForm.value = res.data
            }
            couponVisible.value = true
          }
        })
      }
    })
  }

  function changeCoupon(val: any) {
    if (couponForm.value.couponPlanId) {
      const item = couponList.value.find((i: any) => i.id === val)
      couponData.value = item.seriesCouponList
    } else {
      couponData.value = []
    }
  }

  function couponOk() {
    couponData.value.forEach((item: any) => {
      item.couponId = item.id
    })
    post({
      url: couponplan,
      data: () => {
        return {
          seriesId: couponForm.value.seriesId,
          couponPlanId: couponForm.value.couponPlanId,
          seriesCouponGiveSetMealList: couponData.value,
          receiveType: couponForm.value.receiveType,
        }
      },
    }).then((res: any) => {
      if (res.code == 0) {
        Message.success(res.msg)
        couponClose()
      }
    })
  }

  function couponClose() {
    couponForm.value.couponPlanId = ''
    couponForm.value.receiveType = 0
    couponData.value = []
    couponVisible.value = false
  }

  const copy = (val: any) => {
    info.info = JSON.parse(JSON.stringify(val))
    copyForm.value.name = val.name
    copyVisible.value = true
  }

  const opNameFn = (val: any) => {
    info.info.shutdownEarly = ''
    info.info.pollingCondition = ''
    channelNo.value.forEach((item: any) => {
      if (item.id == val) {
        modal.opName = item.api
        //判断流量池的卡
        if (item.api == false) {
          info.info.pollingCondition = 3
        } else {
          info.info.pollingCondition = ''
        }
      }
    })
  }

  const copyCel = () => {
    copyRef.value.resetFields()
    copyVisible.value = false
  }
  const giveRef = ref()
  const cancelGive = () => {
    giveRef.value.resetFields()
    giveForm.value.giftsBalanceIntroduce = ''
    giveVisible.value = false
  }
  const confirmGive = () => {
    giveRef.value.validate((error: any) => {
      if (!error) {
        formpost({
          url: giftsBalance,
          data: () => {
            return {
              ...giveForm.value,
            }
          },
        }).then((res) => {
          if (res.code == 0) {
            cancelGive()
            doRefresh()
          }
        })
      }
    })
  }
  const copyCancel = () => {
    copyRef.value.validate((error: any) => {
      if (!error) {
        if (copyForm.value.copyType == true) {
          info.info.copyId = info.info.id
          info.info.id = ''
          const num = copyForm.value.copyNum
          info.info.name = info.info.name + '-复制'
          if (copyForm.value.copyNum > 1 && copyForm.value.copyMeal == false) {
            for (let index = 0; index < num; index++) {
              addChannels()
            }
          } else {
            addChannels(info.info.copyId)
          }
        } else {
          copyNum.value = 1
          copyRef.value.resetFields()
          copyVisible.value = false
          addTitle.value = '新建系列'
          if (localStorage.getItem('serShow')) {
            showTextwa.value = JSON.parse(localStorage.getItem('serShow'))
          }
          //判断是否为无顺序不传后端前端展示
          if (info.info.realNameOrder == undefined && info.info.realNameProgramme == 1) {
            info.info.realNameOrder = 3
          }
          //上游实名
          if (info.info.realNameUpper == undefined) {
            info.info.realNameUpper = 3
          }
          //系统实名
          if (info.info.realNameSystem == undefined) {
            info.info.realNameSystem = 3
          }
          //提前停机
          if (info.info.shutdownEarlyType == undefined) {
            info.info.shutdownEarlyType = 1
          }
          //限制充值
          if (info.info.limitRechargeType == undefined) {
            info.info.limitRechargeType = 1
          }
          //官方实名
          if (info.info.realNameOfficial == undefined && info.info.realNameProgramme == 0) {
            info.info.realNameOfficial = 3
          }
          //停机阈值
          if (!info.info.shutdownThresholdType) {
            info.info.shutdownThresholdType = 0
          }
          modal.opName = info.info.channel.api
          info.info.id = ''
          channel()
          encodingFn()
          speedFn()
          decorationFns()
          rechargeFn()
          speedVip()
          noticeFangFn()
          useCommon
            .couponListFn()
            .then((res) => {
              couponList.value = res.data
            })
            .catch(() => {})
          modal.visibles = true
          console.log(info.info)
        }
        copyVisible.value = false
      }
    })
  }

  const seriesLists = () => {
    useCommon.seriess().then((res) => {
      series.value = res.data
    })
  }

  const handleChange = (_data: any) => {
    iconList.value = _data
  }

  //Logo上传
  const onSsl = () => {
    Message.success('上传成功')
  }

  //Logo上传
  const onError = (fileItem: any) => {
    Message.error(fileItem.response.msg)
  }

  // 分类数据
  const classData = reactive({
    chooseDataList: [],
    submitDataList: [],
    classList: [],
  })
  //提交分类
  const subForm: any = reactive({
    form: {
      seriesId: '',
      id: '',
      name: '',
      sort: '',
      tag: '',
    },
    addMealForm: {
      id: '',
      checkData: [],
    },
  })
  // 分类列表拖拽排序
  const sortShow = ref(false)
  const handleChangeClass = (_data, extra) => {
    var sorts = []
    _data.forEach((item, index) => {
      sorts.push({
        id: item.id,
        sort: index,
      })
      // item.sort = index
    })
    post({
      url: sortMealClass,
      data: sorts,
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        getClassList()
      } else {
        Message.error(res.msg)
      }
    })
  }
  // 显示新建分类
  const showAddClass = () => {
    classTitle.value = '新建分类'
    modal.classVisible = true
  }
  //编辑分类
  const updateClass = (item: any) => {
    classTitle.value = '编辑分类'
    subForm.form = JSON.parse(JSON.stringify(item))
    modal.classVisible = true
  }
  // 分配套餐
  const classAddMeal = (item: any) => {
    subForm.addMealForm.id = item.id
    modal.addMealVisible = true
    get({
      url: getClassMeals,
      data: {
        groupId: item.id,
      },
    }).then((res) => {
      if (res.code == 0) {
        const ids1 = res.data.map((item) => item.id)
        const ids2 = classData.chooseDataList
          .filter((item) => ids1.includes(item.id))
          .map((item) => item.id)
        subForm.addMealForm.checkData = [...new Set(ids2)]
      }
    })
  }
  // 删除分类
  const deleteClass = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此分类？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        get({
          url: delMealClass,
          data: {
            id: item.id,
          },
        }).then((res) => {
          if (res.code == 0) {
            Message.success(res.msg)
            getClassList()
          }
        })
      },
    })
  }
  // 分类弹窗标题
  const classTitle = ref('新建分类')

  // 全选分类
  const chooseAllIds = () => {
    subForm.addMealForm.checkData = classData.chooseDataList.map((item) => item.id)
  }
  // 反选分类
  const chooseFanClass = () => {
    subForm.addMealForm.checkData = classData.chooseDataList
      .filter((obj) => !subForm.addMealForm.checkData.includes(obj.id))
      .map((item) => item.id)
  }
  // 获取分类列表
  function getClassList() {
    if (subForm.form.seriesId) {
      sortShow.value = true
    }
    get({
      url: getMealClassList,
      data: {
        seriesId: subForm.form.seriesId,
      },
    }).then((res) => {
      classData.classList = res.data
    })
  }
  const getMealLists = () => {
    get({
      url: mealLists,
      data: () => {
        return {
          seriesIds: subForm.form.seriesId,
        }
      },
    }).then((res) => {
      if (res.code == 0) {
        classData.chooseDataList = res.data
      }
    })
  }
  const change1024 = (item: any) => {
    info.info.unlimitedTrafficThreshold = item * 1024
  }
  // 关闭新建分类
  const handleCancel = () => {
    classRef.value.resetFields()
    subForm.form.id = ''
    modal.classVisible = false
  }
  // 关闭新建分类
  const handleCancelAddMeal = () => {
    subForm.addMealForm.checkData = []
    modal.addMealVisible = false
  }
  // 提交新建分类
  const handleBeforeOk = () => {
    classRef.value.validate((error: any) => {
      if (!error) {
        if (subForm.form.id == '') {
          post({
            url: addMealClass,
            data: {
              ...subForm.form,
            },
          }).then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancel()
              getClassList()
            }
          })
        } else {
          post({
            url: updateMealClass,
            data: {
              ...subForm.form,
            },
          }).then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              handleCancel()
              getClassList()
            }
          })
        }
      }
    })
  }
  // 提交分配套餐
  const handleBeforeOkAddMeal = () => {
    console.log(subForm.addMealForm.checkData)
    // classData.submitDataList = classData.chooseDataList.map((item) => ({
    //   id: item.id,
    //   groupId: null,
    // }))
    // classData.submitDataList.forEach((item) => {
    //   if (subForm.addMealForm.checkData.includes(item.id)) {
    //     item.groupId = subForm.addMealForm.id
    //   } else {
    //     item.groupId = null
    //   }
    // })
    post({
      url: fenpeiMeal + '?groupId=' + subForm.addMealForm.id,
      data: subForm.addMealForm.checkData,
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        handleCancelAddMeal()
        getClassList()
      }
    })
  }
  const beforeCloseIconForm = () => {
    iconRef.value.resetFields()

    modal.visibleIconForm = false
  }

  const iconFn = async () => {
    await (iconList.value = table.dataList)
    await seriesLists()
    await (modal.visibleIcon = true)
  }

  const encodingFn = () => {
    useCommon.encodings().then((res) => {
      encoding.value = res.data
    })
  }

  const channel = () => {
    useCommon.channels().then((res) => {
      channelNo.value = res.data
    })
  }

  const speedFn = () => {
    useCommon.speeds().then((res) => {
      speed.value = res.data
    })
  }

  const decorationList: any = ref([])

  const decorationFns = () => {
    useCommon.decorationFn().then((res) => {
      decorationList.value = res.data
    })
  }

  const rechargeFn = () => {
    useCommon.recharges().then((res) => {
      recharge.value = res.data
    })
  }

  const resetSeach = () => {
    seachForm.value.resetFields()
    form.operationMode = ''
    form.pollingCondition = ''
    form.channelId = ''
    form.preStorage = ''
    form.addTime = ''
    form.endTime = ''
    form.name = ''
    doRefresh(1)
  }

  const realNameSystemFn = () => {
    if (info.info.realNameProgramme == 0) {
      info.info.realNameSystem = 3
      info.info.realNameOrder = 3
      info.info.realNameOfficial = 3
    } else {
      info.info.realNameSystem = 0
      info.info.realNameOfficial = 3
      info.info.realNameOrder = 3
    }
  }

  const exportChannelLists = () => {
    loading.value = true
    useCommon
      .downLoads(exportSeriesList, form, '系列列表')
      .then(() => {
        loading.value = false
      })
      .catch(() => {
        loading.value = false
      })
  }
  const key = ref('1')
  const beforeClose = () => {
    infoRefs.value.clearValidate()
    info.info.shutdownEarlyType = 1
    info.info.limitRechargeType = 1
    info.info.shutdownEarly = 0
    info.info.operationMode = 0
    info.info.shutdownThresholdType = 0
    infoRefs.value.resetFields()
    info.info.id = ''
    key.value = '1'
    info.info.dayTimeType = 0
    modal.opName = false
    list1.value = ['1']
    list2.value = ['1']
    list3.value = ['1']
    list4.value = ['1']

    modal.visibles = false
    localStorage.setItem('serShow', showTextwa.value)
  }

  const beforeCloseRealName = () => {
    RealName.value.resetFields()
    modal.visibleRealName = false
  }

  const realNameOk = () => {
    RealName.value.validate((error: any) => {
      if (!error) {
        beforeCloseRealName()
      }
    })
  }

  const handleSubmit = () => {
    infoRef.value.validate((error: any) => {
      if (!error) {
        //判断是否为无顺序不传后端
        //实名顺序
        if (
          (info.info.realNameOrder == 3 && info.info.realNameProgramme == 1) ||
          info.info.realNameProgramme == 0
        ) {
          info.info.realNameOrder = ''
        }
        //上游实名
        if (info.info.realNameUpper == 3) {
          info.info.realNameUpper = ''
        }
        //系统实名
        if (info.info.realNameSystem == 3) {
          info.info.realNameSystem = ''
        }
        //官方实名
        if (
          (info.info.realNameOfficial == 3 && info.info.realNameProgramme == 0) ||
          info.info.realNameProgramme == 1
        ) {
          info.info.realNameOfficial = ''
        }
        if (info.info.id) {
          updateChannels()
        } else {
          if (info.info.copyId) {
            addChannels(info.info.copyId)
          } else {
            addChannels()
          }
        }
      }
    })
  }

  const infoRefs = ref()

  const handleSubmits = () => {
    infoRefs.value.validate((error: any) => {
      if (!error) {
        //判断是否为无顺序不传后端
        //实名顺序
        if (
          (info.info.realNameOrder == 3 && info.info.realNameProgramme == 1) ||
          info.info.realNameProgramme == 0
        ) {
          info.info.realNameOrder = ''
        }
        //上游实名
        if (info.info.realNameUpper == 3) {
          info.info.realNameUpper = ''
        }
        //系统实名
        if (info.info.realNameSystem == 3) {
          info.info.realNameSystem = ''
        }
        //官方实名
        if (
          (info.info.realNameOfficial == 3 && info.info.realNameProgramme == 0) ||
          info.info.realNameProgramme == 1
        ) {
          info.info.realNameOfficial = ''
        }
        if (info.info.id) {
          updateChannels()
        } else {
          if (info.info.copyId) {
            addChannels(info.info.copyId)
          } else {
            addChannels()
          }
        }
      } else {
        console.log(error)
      }
    })
  }

  const infoDepartments = async (val: any) => {
    await speedFn()
    await rechargeFn()
    await disconnection()
    await speedVip()
    await noticeFangFn()
    await decorationFns()
    modal.key = '1'
    info.info = JSON.parse(JSON.stringify(val))
    //判断是否为无顺序不传后端前端展示
    if (info.info.realNameOrder == undefined && info.info.realNameProgramme == 1) {
      info.info.realNameOrder = 3
    }
    //上游实名
    if (info.info.realNameUpper == undefined) {
      info.info.realNameUpper = 3
    }
    //系统实名
    if (info.info.realNameSystem == undefined) {
      info.info.realNameSystem = 3
    }
    //提前停机
    if (info.info.shutdownEarlyType == undefined) {
      info.info.shutdownEarlyType = 1
    }
    //限制充值
    if (info.info.limitRechargeType == undefined) {
      info.info.limitRechargeType = 1
    }
    //官方实名
    if (info.info.realNameOfficial == undefined && info.info.realNameProgramme == 0) {
      info.info.realNameOfficial = 3
    }
    addTitle.value = '编辑系列'
    modal.opName = val.channel.api
    useCommon
      .couponListFn()
      .then((res) => {
        couponList.value = res.data
      })
      .catch(() => {})
    modal.visible = true
  }

  const infoDepartmentss = async (val: any) => {
    if (localStorage.getItem('serShow')) {
      showTextwa.value = JSON.parse(localStorage.getItem('serShow'))
    }
    await speedFn()
    await rechargeFn()
    await disconnection()
    await decorationFns()
    await speedVip()
    await noticeFangFn()
    info.info = JSON.parse(JSON.stringify(val))
    //判断是否为无顺序不传后端前端展示
    if (info.info.realNameOrder == undefined && info.info.realNameProgramme == 1) {
      info.info.realNameOrder = 3
    }
    //判断是否为无顺序不传后端前端展示
    if (info.info.setMealRestrictions == undefined) {
      info.info.setMealRestrictions = false
    }
    //上游实名
    if (info.info.realNameUpper == undefined) {
      info.info.realNameUpper = 3
    }
    //系统实名
    if (info.info.realNameSystem == undefined) {
      info.info.realNameSystem = 3
    }
    //提前停机
    if (info.info.shutdownEarlyType == undefined) {
      info.info.shutdownEarlyType = 1
    }
    //限制充值
    if (info.info.limitRechargeType == undefined) {
      info.info.limitRechargeType = 1
    }
    //官方实名
    if (info.info.realNameOfficial == undefined && info.info.realNameProgramme == 0) {
      info.info.realNameOfficial = 3
    }
    //停机阈值
    if (!info.info.shutdownThresholdType) {
      info.info.shutdownThresholdType = 0
    }
    modal.opName = val.channel.api
    useCommon
      .couponListFn()
      .then((res) => {
        couponList.value = res.data
      })
      .catch(() => {})
    addTitle.value = '编辑系列'
    modal.visibles = true
  }

  //极速会员列表
  const speedList = ref([])
  function speedVip() {
    useCommon
      .speedVip()
      .then((res) => {
        speedList.value = res.data
      })
      .catch(() => {})
  }

  //公告方案列表
  const noticeFangList = ref([])
  function noticeFangFn() {
    useCommon
      .noticeFang()
      .then((res) => {
        noticeFangList.value = res.data
      })
      .catch(() => {})
  }

  const updateChannels = () => {
    post({
      url: updateSeries,
      data: {
        ...info.info,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        beforeClose()
        doRefresh()
      }
    })
  }

  const addChannels = (val?: any) => {
    post({
      url: addSeries + '?id=' + val,
      data: {
        ...info.info,
      },
    }).then((res) => {
      if (res.code == 0) {
        if (checked1.value == true) {
          infoRef.value.clearValidate()
          info.info.shutdownEarlyType = 1
          info.info.shutdownEarly = 0
          info.info.operationMode = 0
          info.info.shutdownThresholdType = 0
          infoRef.value.resetFields()
          list1.value = ['1']
          list2.value = ['1']
          list3.value = ['1']
          list4.value = ['1']
          info.info.id = ''
          checked1.value = false
          key.value = '1'
          Message.success('新建成功，当前已开始新建新的系列')
          doRefresh()
        } else {
          Message.success(res.msg)
          beforeClose()
          doRefresh()
        }
      }
    })
  }

  const encodingLists = () => {
    get({
      url: encodingList,
      data: () => {
        return {}
      },
    }).then((res) => {
      treeData.list = res.data
      return res.data
    })
  }

  function onUpdateBorder(isBordered: boolean) {
    tables.bordered = isBordered
  }

  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }

  function doRefresh(value?: number) {
    tables.tableLoading = true
    if (value) {
      pagination.page = value
    }
    get({
      url: seriesList,
      data: {
        ...form,
        page: pagination.page,
        size: pagination.pageSize,
      },
    }).then((res) => {
      tables.tableLoading = false
      encodingLists()
      table.handleSuccess(res.data.list)
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data.list
    })
  }

  //删除系列
  const deleteChannels = (val: number) => {
    get({
      url: deleteSeries,
      data: {
        id: val,
      },
    }).then((res) => {
      if (res.code == 0) {
        Message.success(res.msg)
        doRefresh()
      }
    })
  }
  const gotoZx = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要前往装修？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        router.push({ path: '/channel/pageSet/design', query: { seriesId: item.id } })
      },
    })
  }
  const onDeleteItem = (item: any) => {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此渠道？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确定',
      onOk() {
        deleteChannels(item.id)
      },
    })
  }

  function onAddItem() {
    info.info.realNameOfficial = 3
    info.info.id = ''
    addTitle.value = '新建系列'
    channel()
    encodingFn()
    speedFn()
    rechargeFn()
    speedVip()
    noticeFangFn()
    useCommon
      .couponListFn()
      .then((res) => {
        couponList.value = res.data
      })
      .catch(() => {})
    modal.visible = true
  }

  function onAddItems() {
    addTitle.value = '新建系列'
    if (localStorage.getItem('serShow')) {
      showTextwa.value = JSON.parse(localStorage.getItem('serShow'))
    }
    info.info = {
      decorationPlanId: '',
      showImage: false,
      unlimitedTrafficThreshold: '',
      realNameLinkType: 0, //实名链接类型 0系统链接 1跟随上游 2自定义 3第三方链接
      realNameLink: '', //实名链接 当realNameLinkType为 0或1时该字段为null 2自定义链接 3接口地址
      realNameEncoding: '',
      speedVip: [], //极速会员
      channelId: '', //渠道ID
      rechargeId: '', //预存方案ID
      operator: 0, //运营商 0中国移动 1中国联通 2中国电信 3中国广电
      name: '', //系列名称
      showName: '', //显示名称
      realNameProgramme: 0, //实名方案 0单独实名 1合并实名
      realNameSystem: 3, //系统实名 null不进行实名 0短信实名 1国政通实名
      realNameOfficial: 3, //官方实名 当realNameProgramme为0时该参数有效 null不进行判断 0充值前官方实名, 1充值后官方实名
      realNameOrder: 3, //实名顺序 当realNameProgramme为1时该参数有效 null不进行判断 0充值前实名 1充值后实名
      realNameUpper: 3, //上游实名 null不需要实名 0上游提供实名连接 1上游实名状态进行跳转
      realNameUpperUrl: '', //上游实名连接 当realNameUpper为0时该字段必填写
      realNamePackageJudge: true, //套餐判断, 是否允许官方实名 true没有有效期套餐允许官方实名 false没有有效期套餐不允许官方实名
      preStorage: false, //强制预存true强制, false不强制
      expirationTime: 1, //到期时间 0跟随上游 1系统
      takeEffectTime: true, //生效时间 true开启, false关闭
      speedLimitId: '', //限速方案ID
      disconnection: '', //达量断网 0总流量断网 1天流量断网
      disconnectionThreshold: '', //达量断网阈值
      limitRecharge: '', //限制月底前X多天不能充值 当为null时不限制
      shutdownThreshold: '', //停机阈值, 流量低于X时进行停机 当为null时不限制
      shutdownEarlyType: 1, //提前停机类型 提现停机类型 0小时 1天
      shutdownEarly: '', //提前停机
      close: false, //状态true关闭,  false正常
      realNameAlert: true, //true开启,  false关闭
      timeModeDay: '', // 时间模式 0：整30天 1：最后一天提前一天23:59 2：最后一天00:00
      timeModeMonth: '',
      dayTimeType: 0,
      timePopup: 0, // 时间弹窗 0强制弹出 1手动点击
      setMealRestrictions: true, // 套餐限制 开启：加油包可以使用余额进行支付，关闭：加油包不可以使用余额进行支付
      realNameCopyCard: true, // 复制卡号：true复制 false不复制
      remarks: '', // 备注
      orderSubmit: true, //提交订单 0不提交 1提交
      nextSubmit: true, //次月提交 0不提交 1提交
      pollingCondition: '', //轮询条件 为null不轮询 0所有卡 1已充值卡 2已充值卡+已实名卡 3已充值卡+已实名卡+已激活卡
      operationMode: 0, //运营模式 当渠道为流量池时该参数才有效 0套餐包模式 1共享池模式
      settlementDate: '', // 结算日期 当渠道为流量池时该参数才有效 0-月底结算 1-26号结算
      limitRechargeType: 1, // 限制充值类型 0小时 1天
      paySwitch: false, //自动切换
      payDefault: '', //默认支付 0余额 1支付宝 2微信 为null不选择
      payFold: [], //折叠支付 0余额 1支付宝 2微信 为null不折叠
      payRecommendation: [], //推荐支付 0余额 1支付宝 2微信 为null不推荐
      payRandomBalanceAdd: '', // 余额充值随机立减开始金额
      payRandomBalanceEnd: '', // 余额充值随机立减结束金额
      payRandomPackageAdd: '', // 套餐充值随机立减开始金额
      payRandomPackageEnd: '', // 套餐充值随机立减结束金额
      payRandomCouponAdd: '', // 优惠卷充值随机立减开始金额
      payRandomCouponEnd: '', // 优惠卷充值随机立减结束金额
      payCancelTips: '',
      shutdownThresholdType: 0,
      clientNoticePlanId: '', //公告方案
    }
    info.info.realNameOfficial = 3
    info.info.id = ''
    channel()
    encodingFn()
    speedFn()
    decorationFns()
    rechargeFn()
    speedVip()
    noticeFangFn()
    useCommon
      .couponListFn()
      .then((res) => {
        couponList.value = res.data
      })
      .catch(() => {})
    modal.visibles = true
  }

  const disconnectionList = ref([])

  function disconnection() {
    useCommon
      .disconnectionFn()
      .then((res) => {
        disconnectionList.value = res.data
      })
      .catch(() => {})
  }

  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  }

  onMounted(async () => {
    if (history.state.name) {
      form.name = history.state.name
    }
    await doRefresh()
    await channel()
    await encodingFn()
    await speedFn()
    await rechargeFn()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-radio) {
    margin-right: 2px;
  }

  :deep(.arco-alert-content) {
    color: rgb(var(--arcoblue-5));
  }

  :deep(.arco-input-append) {
    border-left: 0;
    padding-left: 5px;
  }

  :deep(.arco-input-append) {
    padding: 0 !important;
  }

  .input516 {
    width: 470px;
    margin-left: 20px;
  }

  :deep(.arco-form-item-label) {
    width: 70px;
    text-align: left;
    height: 18px;
  }

  :deep(.arco-collapse-item-content-box) {
    padding: 0;
  }

  :deep(.arco-form-item) {
    margin-bottom: 15px;
  }

  :deep(.arco-form-item-layout-vertical > .arco-form-item-label-col) {
    margin-bottom: 5px;
  }

  .img {
    vertical-align: middle;
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }

  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-tabs-nav-tab) {
    width: 100px !important;
  }

  :deep(.arco-tabs-tab-title) {
    width: 52px !important;
    text-align: center;
  }

  :deep(.arco-tabs-nav-type-capsule .arco-tabs-nav-tab-list) {
    padding: 12px 12px;
  }

  .tabs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;

    .button {
      box-sizing: border-box;
      padding-bottom: 5px;
    }
  }

  .action {
    color: #009dff;
    border-bottom: 3px solid #009dff;
  }

  .butten {
    margin-right: 5px;
    padding: 0px;
  }

  .titleName {
    line-height: 22px;
    display: flex;
    align-items: center;
  }

  :deep(.arco-collapse-item-header-right + .arco-collapse-item-content) {
    padding-left: 0px !important;
  }

  :deep(.arco-collapse-item-content) {
    padding-right: 0px !important;
    background-color: #fff;
  }

  .box {
    display: flex;
    align-items: center;
    height: 15px;

    .line {
      width: 5px;
      height: 15px;
      margin-right: 10px;
      background-color: #40a1ff;
    }
  }

  :deep(.arco-collapse) {
    border: 0 !important;
  }

  :deep(.arco-collapse-item-header) {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-left: 20px;
    margin-top: 20px;
    background-color: var(--color-bg-3);
  }

  .centersss {
    :deep(.arco-collapse-item-header) {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      margin-left: 20px;
      margin-top: 5px;
      background-color: var(--color-bg-3);
    }
  }

  :deep(.arco-collapse-item-content-box) {
    background-color: var(--color-bg-3);
  }

  :deep(.arco-collapse-item-active > .arco-collapse-item-header) {
    border: 0 !important;
  }

  :deep(.arco-collapse-item-header-right) {
    padding-left: 0 !important;
    transition: none;
  }

  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
  }
</style>
<style>
  .arco-drawer-body {
    padding: 0 !important;
  }
</style>
